<template>
  <div class="root" v-if="dataList.length">
    <div class="title">
      <span class="iconfont heart">&#xe600;</span>
      <span class="name">猜你喜欢</span>
    </div>
    <div class="product" v-for="item of dataList" :key="item.id">
      <div class="product-img">
        <img :src="item.imgUrl"/>
      </div>
      <div class="product-info">
        <div class="product-info-name">{{item.name}}</div>
        <div class="product-info-star">
          <div class="product-info-star-1 iconfont">&#xe611;&#xe611;&#xe611;&#xe611;&#xe611;</div>
          <div class="product-info-star-2 iconfont"
               :style="{width:getWidth(item.star)}">&#xe611;&#xe611;&#xe611;&#xe611;&#xe611;</div>
        </div>
        <div class="product-info-comment">{{item.commentNum}}条评论</div>
        <div class="product-info-price">
          <span>￥</span>
          {{item.price}}
          <span>起</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeRecom',
  props: {
    dataList: {
      type: Array,
      required: true
    }
  },
  methods: {
    getWidth (star) {
      return Number(star) / 5 * 1.2 + 'rem'
    }
  }
}
</script>

<style lang="stylus" scoped>
.title
  margin: .25rem 0
  background: #eee
  text-indent: .2rem
  .heart
    color: #FF5E54
  .name
    color: #212121
    font-size: .32rem
    height: .44rem
    line-height: .44rem
.product
  display: flex
  padding-bottom: .2rem
  .product-img
    display: inline-block
    vertical-align: top
    img
      height: 2rem
      width: 2rem
  .product-info
    flex: 1
    display: inline-block
    padding-left: .22rem
    .product-info-content
      height: .44rem
      line-height: .44rem
      color: #212121
      font-size: .32rem
      margin-top: .26rem
    .product-info-star
      position: relative
      top: 0
      left: 0
      letter-spacing: -.08rem
      height: 0
      width: 1.2rem
      padding-bottom: .34rem
      display: inline-block
      vertical-align: middle
      margin-top: .06rem
      .product-info-star-1
        position: absolute
        top: 0
        left: 0
        color: #E0E0E4
        width: 1.2rem
      .product-info-star-2
        position: absolute
        top: 0
        left: 0
        color: #FFB436
        overflow: hidden
    .product-info-comment
      color: #616161
      font-size: .24rem
      line-height: .28rem
      height: .28rem
      display: inline-block
      margin-left: .4rem
      vertical-align: middle
      margin-top: .06rem
    .product-info-price
      margin-top: .22rem
      height: .46rem
      color: #ff8300
      font-size: .4rem
      :nth-child(1)
        font-size: .2rem
        vertical-align: middle
        margin-right: -.15rem
      :nth-child(2)
        color: #212121
        font-size: .2rem
        margin-left: -.1rem
        vertical-align: middle
</style>
